<script setup lang='ts'>
import { reactive, watch, ref, computed } from 'vue'
const age = ref(18)
const subAge = () => {
    age.value++
}

const count = ref(100)
const subCount = () => {
    count.value = count.value + 10
}

const username = ref('')
const userPrice = ref()
const list = reactive([
    {
        id: 1,
        name: '是法国红酒',
        price: 28
    },
    {
        id: 2,
        name: '打广告',
        price: 200
    },
])
// 计算属性
const computedList = computed(() => {
    return list.reduce((sun, item) => {
        return sun + +item.price
    }, 0)
})

// 修改数据
const subList = (id) => {
    const newList = list.filter(item => item.id === id)
    console.log(newList);
    newList.map(item => {
        item.name = username.value;
        item.price = userPrice.value
    })
}

// 新增数据
const subAdd = () => {
    list.push({
        id: Number(new Date()),
        name: username.value,
        price: userPrice.value
    })
}

</script>
<template>
    <div class="my-index">

        <span>{{ age }}</span>
        <button @click="subAge">+1</button>

        <span>{{ count }}</span>
        <button @click="subCount">数量➕10</button>

        <hr>
        昵称： <input v-model="username" type="text" name="" id="">
        价格： <input v-model="userPrice" type="text" name="" id="">
        <ul>
            <li v-for="item in list" :key="item.id">
                <div>昵称：{{ item.name }}</div>
                <div>价格：{{ item.price }}</div>
                <button @click="subList(item.id)">修改昵称</button>
            </li>
        </ul>
        <div>合计：{{ computedList }}</div>
        <button @click="subAdd">新增</button>
    </div>
</template>
<style scoped>
.my-index {
    border: 1px solid #666;
    margin-top: 20px;
    padding: 10px;
}
</style>
